<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>hello</title>
<style type="text/css">
th{width: 120px; height: 26px; border: 1px solid black;}
td{width: 120px; height: 26px; border: 1px solid black;}
.t-value{color: blue;}
</style>
<script type="text/javascript">
	//页面加载完毕
	window.onload = function() {
		initTable();
	}
    
	function initTable() {
		// 单元格id为表号-功能号，表号功101~120，功能号5个1101、1102...
		var tboday = '';
		for(var i=0; i<20; i++) {
			var meter = 100 + i + 1;
			tboday += '<tr><td>'+meter+'-1101</td><td class="t-value" id="mf-'+meter+'-1101"></td>'
				+ '<td>'+meter+'-1102</td><td class="t-value" id="mf-'+meter+'-1102"></td>'
				+ '<td>'+meter+'-1103</td><td class="t-value" id="mf-'+meter+'-1103"></td>'
				+ '<td>'+meter+'-1104</td><td class="t-value" id="mf-'+meter+'-1104"></td>'
				+ '<td>'+meter+'-1105</td><td class="t-value" id="mf-'+meter+'-1105"></td></tr>';
		}
		
		var tableBody = document.getElementById('tableBody');
		tableBody.innerHTML = tboday;
    }
    
	function WebSocketTest() {
		if ("WebSocket" in window) {
        	// 打开一个 web socket
        	var ws = new WebSocket("ws://localhost:8080/test");
        	
	        ws.onopen = function() {
               // Web Socket 已连接上，使用 send() 方法发送数据
               // alert("开始发送数据...");
               ws.send("Pj110101001-all");
            };
                
            ws.onmessage = function (evt) { 
               var received_msg = evt.data;
               handleData(received_msg);
            };
                
            ws.onclose = function() { 
               // 关闭 websocket
               alert("连接已关闭..."); 
            };
        } else {
           // 浏览器不支持 WebSocket
           alert("您的浏览器不支持 WebSocket!");
        }
	}
	
	function handleData(sdata) {
		// [101;1101,67.05;1102,57.03;1103,11.27;1104,58.11;1105,42.47]
		var meterFuncDataAray = sdata.split('#');
		
		var dataAray = null;
		var meterCode = null;
		var funcCode = null;
		var dataValue = '';
		for (var meterFuncData of meterFuncDataAray) {
			dataAray = meterFuncData.split(';');
			
			meterCode = dataAray[0];
			
			for(j=1,len=dataAray.length; j<len; j++) {
				funcCode = dataAray[j].split(',')[0];
				dataValue = dataAray[j].split(',')[1];
				document.getElementById('mf-'+meterCode+'-'+funcCode).innerHTML=dataValue;
				dataValue = '';
			}
		}
	}
	
	function connectServer() {
		document.getElementById('btn').disabled=true;
		WebSocketTest();
	}
	
</script>

</head>
<body>
	<div id="content_div" style="margin: 0 auto; margin-top: 10px; text-align: center;">
		<button onclick="connectServer()" id="btn" style="margin-top: 5px; margin-bottom: 5px;">连接服务</button>
		<table style="border: 1px solid black; margin:auto; width:960px; cellspacing:0; cellpadding:0;">
			<thead><tr>
				<th>表号-功能号</th><th>值</th>
				<th>表号-功能号</th><th>值</th>
				<th>表号-功能号</th><th>值</th>
				<th>表号-功能号</th><th>值</th>
				<th>表号-功能号</th><th>值</th>
			</tr></thead>	
			<tbody id="tableBody">
			</tbody>	
		</table>
	</div>
</body>
</html>